<template>
    <div class="login">
        <h1>普通登录组件</h1>
       <div class="account">
           <account-login
                   :rule-form="ruleForm"
                   :rules="rules"
                   @submit="submit"
                   @errorHandle="errorHandle"
           >
           </account-login>
       </div>
        <h1>短信验证码登录组件</h1>
        <div class="phone">
            <phone-login
                    :count-down="30"
                    :rule-form="phoneForm"
                    @send="send"
                    @submit="submit"
                    @errHandle="errorHandle"
            >
            </phone-login>
        </div>
    </div>
</template>

<script>
export default {
  name: "login",
  data () {
    return {
        ruleForm: {
            username: '',
            password: ''
        },
        rules: {
            username: [
                {required: true, message: '用户名不能为空', trigger: 'blur'},
                {min: 2, max: 6, message: '用户名在2-6个字符之间', trigger: 'blur'}
            ],
            password: [
                {required: true, message: '密码不能为空', trigger: 'blur'},
                {min: 6, max: 156, message: '密码名在6-15个字符之间', trigger: 'blur'}
            ]
        },
        phoneForm: {
            phone: '',
            code: ''
        }
    }
  },
  methods: {
      submit() {
          this.$message({
              type: 'success',
              message: '提交成功'
          })
      },
      errorHandle() {
          this.$message({
              type: 'error',
              message: '表单填写有误,请检查！'
          })
      },
      send() {
          this.$message.info('发送验证码成功')
      }
  }
}
</script>

<style scoped lang="scss">
    .login {
        margin-top: 30px;
        margin-left: 30px;
    }
    .account, .phone {
        width: 500px;
    }
</style>
